<template>
  <div>
    <Portlet class="show">
      <table class="table show-table">
        <tbody>
        <tr v-if="paymanagementInfo.status == 'P-300'">
          <td width="140">支付单号：</td>
          <td width="20%">{{paymanagementInfo.payCode}}</td>
          <td width="140">发起账号：</td>
          <td width="20%">{{paymanagementInfo.foundPhone}}</td>
          <td width="140">支付时间：</td>
          <td width="20%">{{paymanagementInfo.payTime | unixTimestampFilter}}</td>
          <td width="140"></td>
          <td width="20%"></td>
        </tr>
        <tr v-else>
          <td width="140">支付单号：</td>
          <td width="20%">{{paymanagementInfo.payCode}}</td>
          <td width="140">发起账号：</td>
          <td width="20%">{{paymanagementInfo.foundPhone}}</td>
          <td width="140">发起时间：</td>
          <td width="20%">{{paymanagementInfo.foundTime | unixTimestampFilter}}</td>
          <td width="140"></td>
          <td width="20%"></td>
        </tr>
        <tr>
          <td>通过费用：</td>
          <td>{{paymanagementInfo.orderNum}}项</td>
          <td>通过金额：</td>
          <td>{{paymanagementInfo.orderAllMoney}}元</td>
          <td>审核账号</td>
          <td>{{paymanagementInfo.auditName}}</td>
          <td>审核时间</td>
          <td>{{paymanagementInfo.auditTime | unixTimestampFilter}}</td>
        </tr>
        </tbody>
      </table>
    </Portlet>
    <el-col :span="24" class="col-xs-12">
      <el-card class="search-form">
        <el-form ref="searchForm" class="el-form-col" :model="search">
          <el-row :gutter="15" style="position:relative;">
            <el-col :lg="4" :md="6">
              <el-form-item prop="fhbOrderNo" style="position: relative">
                <el-input v-model="search.fhbOrderNo" type="textarea" :rows="4" placeholder="订单号  (支持多单查询，用英文逗号分隔)"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="fhbOutOrderNo" style="position: relative">
                <el-input v-model="search.fhbOutOrderNo" type="textarea" :rows="4" placeholder="来源单号  (支持多单查询，用英文逗号分隔)"
                          clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consigneeName">
                <el-input v-model="search.consigneeName" placeholder="收件人" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="success" :loading="searchLoading" plain @click="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="consigneePhone">
                <el-input v-model="search.consigneePhone" placeholder="收件电话" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="address">
                <cascade-address :level="3" changeOnSelect v-model="search.address" placeholder="收件地址:省/市/区"></cascade-address>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="success" :loading="searchLoading" plain @click="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="serviceNo">
                <el-select v-model="search.serviceNo" clearable placeholder="服务类型">
                  <el-option
                    v-for="item in serviceArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="costTypeNo">
                <el-select v-model="search.costTypeNo" clearable placeholder="费用类型">
                  <el-option
                    v-for="item in costTypeArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="costName">
                <el-input v-model="search.costName" placeholder="费用名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="orderSource">
                <el-select v-model="search.orderSource" clearable placeholder="订单来源">
                  <el-option
                    v-for="item in orderSourceArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <div v-show="isOpen">
              <el-col :lg="4" :md="6">
                <el-form-item prop="colorFlag">
                  <el-select v-model="search.colorFlag" filterable placeholder="订单标记">
                    <el-option v-for="item in colorArr"
                               :key="item.value"
                               :label="item.text"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="startOrderCreateTime">
                  <el-date-picker type="date"
                                  placeholder="下单开始日期"
                                  value-format="yyyy-MM-dd"
                                  v-model="search.startOrderCreateTime" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="endOrderCreateTime">
                  <el-date-picker type="date"
                                  placeholder="下单结束日期"
                                  v-model="search.endOrderCreateTime"
                                  value-format="yyyy-MM-dd"
                                  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </div>
          </el-row>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24" class="col-xs-12">
      <el-table
        :data="tableData"
        stripe
        heigth="500"
        style="width: 100%"
      >
        <el-table-column
          fixed
          prop="fhbOrderNo"
          label="订单号">
          <template slot-scope="scope">
            <span v-if="scope.row.colorFlag && scope.row.colorFlag !== 'gray'">
              <a href="javascript:;"><span class="fa-color actions-0" >{{scope.row.fhbOrderNo}}</span></a>
              <span :style="'font-size:20px; color:' + scope.row.colorFlag"><i class="fa fa-flag" ></i></span>
            </span>
            <span v-else>
              <a href="javascript:;"><span class="fa-color actions-0" >{{scope.row.fhbOrderNo}}</span></a>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="payNumber"
          label="费用流水">
        </el-table-column>
        <el-table-column
          prop="costType"
          label="费用类型">
        </el-table-column>
        <el-table-column
          prop="costName"
          label="费用名">
        </el-table-column>
        <el-table-column
          prop="money"
          label="费用金额">
        </el-table-column>
        <el-table-column
          width="180"
          label="优惠券">
          <template slot-scope="scope">
            <el-select v-model="scope.row.couponsId" clearable placeholder="请选择优惠券" v-show="scope.row.fhbCoupons.length">
              <el-option v-for="coupon of getfhbCouponsDisable(scope.row.fhbCoupons)" :disabled="coupon.disabled" :label="coupon.name + ':' + coupon.title" :value="coupon.id" :key="coupon.id"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          prop="actualMoney"
          label="实付">
        </el-table-column>
        <el-table-column
          prop="tabStatus"
          label="审批结果">
          <template slot-scope="scope">
            <span v-if="scope.row.tabStatus == 'P-400'" class="font-red">{{scope.row.tabStatus | filterDataBaseDictionary}}</span>
            <span v-else-if="scope.row.tabStatus == 'P-250'" class="green">{{scope.row.tabStatus | filterDataBaseDictionary}}</span>
            <span v-else class="green">{{scope.row.tabStatus | filterDataBaseDictionary}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderSource"
          label="订单来源">
          <template slot-scope="scope">
            {{scope.row.orderSource | filterDataBaseDictionary}}
          </template>
        </el-table-column>
        <el-table-column
          prop="fhbOutOrderNo"
          label="来源单号">
        </el-table-column>
        <el-table-column
          width="180"
          prop="orderCreateTime"
          label="下单时间">
          <template slot-scope="scope">
            {{ unixTimestampFilter(scope.row.orderCreateTime, 'YYYY-MM-DD HH:mm') }}
          </template>
        </el-table-column>
        <el-table-column
          prop="service"
          label="服务类型">
        </el-table-column>
        <el-table-column
          prop="consigneeName"
          label="收件人">
        </el-table-column>
        <el-table-column
          prop="consigneePhone"
          label="收件电话">
        </el-table-column>
        <el-table-column
          label="收件地址">
          <template slot-scope="scope">
            {{scope.row.province}} {{scope.row.city}} {{scope.row.district}}
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" class="col-xs-12">
      <payment ref="payment" :moneyObj="moneyObj" :id="id"></payment>
    </el-col>
  </div>
</template>

<script>
import {filterDataBaseDictionary, unixTimestampFilter, decimalNumFilter} from '@/filters'
import {copy, dotData} from '@/utils'
import {getFhbServiceType, getFhbOrderSource, getSubDictListOfParentCode} from '@/utils/selectOptions'
import payment from '@/views/fhb/paymentApprove/payment/Payment'
export default {
  name: 'paymentApprovePaymentShow',
  components: {
    payment
  },
  data() {
    return {
      id: this.$route.params.id,
      paymanagementInfo: {},
      visible: false,
      visibleResult: false,
      subOrderFinish: '',
      params: {
        pageSize: 10,
        pageNum: 1
      },
      tableData: [],
      isOpen: false,
      searchLoading: false,
      checkedData: [],
      search: {
        fhbOrderNo: '',
        fhbOutOrderNo: '',
        serviceNo: '',
        costTypeNo: '',
        costName: '',
        consigneeName: '',
        consigneePhone: '',
        address: [],
        orderSource: '',
        colorFlag: '',
        startOrderCreateTime: '',
        endOrderCreateTime: ''
      },
      costLoading: false,
      serviceArr: [],
      orderSourceArr: [],
      checkOrderArr: [],
      costTypeArr: [],
      colorArr: [
        {text: '红色', value: 'red'},
        {text: '橙色', value: 'orange'},
        {text: '黄色', value: 'yellow'},
        {text: '绿色', value: 'green'},
        {text: '蓝色', value: 'blue'}
      ],
      tabs: []
    }
  },
  filters: {
    unixTimestampFilter,
    filterDataBaseDictionary,
    decimalNumFilter
  },
  computed: {
    usedArr: function() {
      let tempArr = []
      this.tableData.forEach(v => {
        if (v.couponsId) {
          tempArr.push(v.couponsId)
          for (let i = 0; i < v.fhbCoupons.length; i++) {
            let actualMoney = 0
            if (v.fhbCoupons[i].id === v.couponsId) {
              actualMoney = v.money - v.fhbCoupons[i].discount
              this.$set(v, 'actualMoney', decimalNumFilter(actualMoney))
              return
            }
          }
        } else {
          this.$set(v, 'actualMoney', v.money)
        }
      })
      return tempArr
    },
    moneyObj() {
      let totalMoney = 0 // 总计
      let totalActualMoney = 0 // 实付
      let totalDiscountMoney = 0 // 总优惠
      let couponsOrderBeans = []
      this.tableData.forEach(item => {
        totalMoney += Number(item.money)
        totalActualMoney += Number(item.actualMoney)
        totalDiscountMoney = totalMoney - totalActualMoney
        if (item.couponsId) {
          couponsOrderBeans.push({orderId: item.fhbOrderId, couponsId: item.couponsId})
        }
      })
      return {
        totalMoney: decimalNumFilter(totalMoney),
        totalDiscountMoney: decimalNumFilter(totalDiscountMoney),
        totalActualMoney: decimalNumFilter(totalActualMoney),
        couponsOrderBeans: couponsOrderBeans
      }
    }
  },
  created() {
    getFhbServiceType().then(data => {
      this.serviceArr = data
    })
    getFhbOrderSource().then(data => {
      this.orderSourceArr = data
    })
    getSubDictListOfParentCode('FUWU').then(data => {
      this.costTypeArr = data
    })
    this.getpaymanagementInfo()
    this.getTable()
  },
  methods: {
    unixTimestampFilter,
    filterDataBaseDictionary,
    searchFunc() {
      this.getTable()
    },
    show(data) {
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    getpaymanagementInfo() {
      this.$ajax.get('/ms-fahuobao-order/pay-management/find-pay-package-item-head', {
        packageId: this.id
      }).then(response => {
        if (response) {
          this.paymanagementInfo = response.data
        }
      })
    },
    getTable() {
      let data = copy(this.search, true)
      data.provinceNo = dotData(data.address, '[0]') || ''
      data.cityNo = dotData(data.address, '[1]') || ''
      data.districtNo = dotData(data.address, '[2]') || ''
      delete data.address
      data.packageId = this.id
      data.tabState = 2
      delete data.address
      this.$ajax.get('/ms-fahuobao-order/pay-management/find-pay-package-item', data).then(response => {
        let arr = response.data || []
        arr.forEach(item => {
          item.fhbCoupons.forEach(v => {
            if (v.isDefault === 1) {
              this.$set(item, 'couponsId', v.id)
            }
          })
        })
        this.tableData = arr
      })
    },
    getfhbCouponsDisable(arr) {
      let usedId = this.usedArr
      let temp = copy(arr, true)
      return temp.map(v => {
        if (usedId.indexOf(v.id) >= 0) {
          v.disabled = true
        }
        return v
      })
    }
  }
}
</script>

<style scoped>

</style>
